<template>
  <div>
    <div class="center">
      <!-- 头部 -->
      <div class="table_header flex flex_bet flex-wrap">
        <div class="table_button">
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="Refresh"></el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="toAddData">添加</el-button>
        </div>
        <div class="table_searchs flex">
          <div class="table_search flex">
            <el-input placeholder="搜索" v-model="searchInput" class="input-with-select" size="small">
              <el-select v-model="select" slot="prepend" placeholder="请选择" class="table_select" style="width:105px">
                <el-option label="归属" value="1"></el-option>
                <el-option label="sn第三四位" value="2"></el-option>
                <el-option label="批次" value="3"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="idnameSearch"></el-button>
            </el-input>
          </div>
          <dynamicTable :checkboxVal="checkboxVal" @alter="alterCheckbok" />
        </div>
      </div>
      <!-- table -->
      <el-table stripe style="width: 100%" :data="tableData" :key="key" border fit highlight-current-row ref="tableDataRef">
        <el-table-column v-if="colData[0].istrue" min-width="50" align="center" prop="id" label="ID"></el-table-column>
        <el-table-column v-if="colData[1].istrue" min-width="120" align="center" prop="admin_name" label="归属"></el-table-column>
        <el-table-column v-if="colData[2].istrue" min-width="120" align="center" prop="nameCode" label="型号"></el-table-column>
        <el-table-column v-if="colData[3].istrue"  min-width="100" align="center" prop="batch" label="分发批次">
          <template slot-scope="scope">
            <p v-for="(item,index) in scope.row.batch" :key="item.id" style="margin: 0;padding: 0">{{item.batch}}</p>
          </template>
        </el-table-column>
        <el-table-column v-if="colData[4].istrue" min-width="120" align="center" prop="brand_name" label="设备品牌"></el-table-column>
        <el-table-column v-if="colData[5].istrue" min-width="120" align="center" prop="equipment_name" label="设备名称"></el-table-column>
        <el-table-column v-if="colData[6].istrue" min-width="120" align="center" prop="model_name" label="设备型号"></el-table-column>
        <el-table-column v-if="colData[7].istrue" min-width="120px"  align="center" prop="create_time" label="创建时间">
          <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
        </el-table-column>
        <el-table-column min-width="150" align="center" prop="log" label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button size="mini" type="primary" @click="openEdit(scope.row)">编辑</el-button>
              <el-button size="mini" @click="toDelData(scope.row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="paging">
        <el-pagination background :current-page.sync="listQuery.startSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="listQuery.pageSize">
        </el-pagination>
      </div>
      <!-- 删除弹窗 -->
      <delete-Dialog title="" :visible.sync="deleteDialogs.show" width="25%" top="40vh" @deleteEvents="deleteEvents" :deleteText="deleteDialogs.deleteText" />
    </div>

    <el-dialog title="安卓系统初始项设置" :visible.sync="logShow" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" @close="redactFormclose">
      <el-form :model="addForm" ref="ruleForm" :rules="rules">
        <el-form-item label="批次:" label-width="120px" prop="batch">
          <el-select v-model="addForm.batch"  multiple filterable placeholder="请选择批次">
            <el-option
              v-for="item in batchArr"
              :key="item.id"
              :label="item.batch"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品型号:" label-width="120px"  prop="name_code">
          <el-select v-model="addForm.sn_three_four" placeholder="请选择" filterable>
            <el-option
              v-for="item in nameCodeOptions"
              :key="item.name_code"
              :label="item.name"
              :value="item.name_code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备品牌:" label-width="120px" prop="brand_name">
          <el-input placeholder="请输入品牌名称" style="width: 210px" v-model="addForm.brand_name"></el-input>
        </el-form-item>
        <el-form-item label="设备名称:" label-width="120px" prop="equipment_name">
          <el-input placeholder="请输入设备名称" style="width: 210px" v-model="addForm.equipment_name"></el-input>
        </el-form-item>
        <el-form-item label="设备型号:" label-width="120px" prop="model_name">
          <el-input placeholder="请输入型号名称" style="width: 210px" v-model="addForm.model_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="logShow  = false" size="mini" round>取 消</el-button>
        <el-button v-if="compileBtn" type="primary" size="mini" round @click="getAddSystemRom('ruleForm')">添加</el-button>
        <el-button v-else type="primary" size="mini" round @click="getEditRomName('ruleForm')">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dynamicTable from "@/components/DynamicTable";
import objectable from "@/utils/objectable.js";
import {
  addSystemRomName,
  delSystemRomName,
  editSystemRomName,
  getBatchTwo,
  querySystemRomName
} from "@/api/equipment.js";
import deleteDialog from "@/components/deleteDialog";
import {getNameCode} from "@/api/appUpdate";
export default {
  components: { dynamicTable, deleteDialog },
  data() {
    return {
      checkboxVal: ['ID', '归属', '型号', '分发批次', '设备品牌', '设备名称', '设备型号', '创建时间'],
      key: 1,
      colData: [], //动态控制table
      total: 0,
      searchInput: "",
      select: "1", //搜索条件
      //归属table
      tableData: [],
      logShow: false,
      listQuery: { userId: localStorage.getItem("ID"), startSize: 1, pageSize: 10, username: undefined, nameCode: '', batch: '' },
      addForm: {
        batch: [],
        sn_three_four: '',
        brand_name: '',
        equipment_name: '',
        model_name: ''
      },
      rules: {
        batch: [{ required: true, message: "请选择批次", trigger: "blur" }],
        sn_three_four: [{ required: true, message: "请选择型号", trigger: "blur" }],
        brand_name: [{ required: true, message: "请输入设备品牌", trigger: "blur" }],
        equipment_name: [{ required: true, message: "请输入设备名称", trigger: "blur" }],
        model_name: [{ required: true, message: "请输入设备型号", trigger: "blur" }],
      },
      deleteDialogs: { show: false, deleteText: '', deleteId: 0 },
      compileBtn: false,
      nameCodeOptions: [],
      batchArr: [],
    }
  },
  created() {
    this.colData = objectable(this.checkboxVal, this.checkboxVal); //转为数组对象，好控制table
    this.queryScreenWifiStatus()
    this.getNameCode();
    this.getBatchTwo()
  },
  methods: {
    toDelData(id) {
      this.deleteDialogs.show = true
      this.deleteDialogs.deleteId = id
    },
    //删除按钮事件
    deleteEvents() {
      let params = { userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip"), id: this.deleteDialogs.deleteId }
      delSystemRomName(params).then(res => {
        this.$message.success(res.msg)
        this.queryScreenWifiStatus()
      })
    },
    //获取型号名称
    getNameCode() {
      getNameCode({userId: localStorage.getItem("id")}).then(res => {
        this.nameCodeOptions = res.data.nameCode
      }).catch(err => {
        this.nameCodeOptions = []
      })
    },
    getBatchTwo() {
      getBatchTwo({ userId: localStorage.getItem("ID") }).then(res => {
        this.batchArr = res.data
      }).catch(err => {
        this.batchArr = []
      })
    },
    redactFormclose() {
      this.$nextTick(()=> {
        this.addForm = this.$options.data().addForm
      })
    },
    openEdit(row){
      this.logShow = true
      this.compileBtn = false
      this.addForm = {
        batch: row.batchArr,
        sn_three_four: row.sn_three_four,
        brand_name: row.brand_name,
        equipment_name: row.equipment_name,
        model_name: row.model_name,
        id: row.id
      }

    },
    getEditRomName(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addForm.userId = localStorage.getItem("ID")
          this.addForm.last_ip = sessionStorage.getItem("Ip")
          editSystemRomName(this.addForm).then(res => {
            this.$message.success(res.msg)
            this.queryScreenWifiStatus()
            this.logShow = false
          }).catch(err => { })
        } else {
          return false
        }
      })
    },
    //添加按钮
    toAddData() {
      this.logShow = true
      this.compileBtn = true
    },
    getAddSystemRom(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addForm.userId = localStorage.getItem("ID")
          this.addForm.last_ip = sessionStorage.getItem("Ip")
          addSystemRomName(this.addForm).then(res => {
            this.$message.success(res.msg)
            this.queryScreenWifiStatus()
            this.logShow = false
          }).catch(err => { })
        } else {
          return false
        }
      })
    },
    queryScreenWifiStatus(){
      querySystemRomName(this.listQuery).then(res => {
        this.tableData = res.data
        this.total = res.total
      }).catch(err => {
        this.total = 0
        this.tableData = []
      })
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.queryScreenWifiStatus();
    },
    handleCurrentChange(val) {
      this.listQuery.startSize = val
      this.queryScreenWifiStatus();
    },
    Refresh() {
      this.listQuery = { userId: localStorage.getItem("ID"), startSize: 1, pageSize: 10, username: undefined }
      this.queryScreenWifiStatus()
    },
    idnameSearch() {
      if (!this.select) return this.$message.warning("请先选择查询条件");
      this.listQuery.startSize = 1
      this.listQuery.pageSize = 10
      switch (this.select) {
        case '1':
          this.listQuery.username = this.searchInput
          this.queryScreenWifiStatus();
          break;
        case '2':
          this.listQuery.nameCode = this.searchInput
          this.queryScreenWifiStatus();
          break;
        case '3':
          this.listQuery.batch = this.searchInput
          this.queryScreenWifiStatus();
          break;
      }
    },
    //下拉动态table子组件
    alterCheckbok(key, conte) {
      this.key = key;
      this.colData.filter(i => {
        if (conte.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.log {
  position: absolute;
  height: 100%;
  width: 100%;
}
.content_left {
  background-color: #394350;
  height: 100%;
  color: #ffffff;
  .log-picture {
    padding: 20px;
    h2 {
      font-weight: 500;
    }
  }
  .upLogo {
    margin-top: 20px;
    .logo_Title {
      margin-right: 5px;
    }
    .upload-demo {
      position: relative;
      right: 10px;
    }
    .logo_upload {
      width: 75%;
      position: relative;
    }
    .logoBtn {
      text-align: center;
    }
  }
  .facility {
    text-align: center;
  }
  .picture {
    text-align: center;
    margin-top: 40px;
  }
  .logo_text {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    span {
      display: inline-block;
      width: 250px;
      font-size: 14px;
      line-height: 25px;
      p {
        margin: 0;
        font-size: 16px;
        padding-bottom: 10px;
      }
    }
  }
  .download-log {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    .download-template {
      width: 250px;
      a {
        background-color: #252e3c;
        height: 40px;
        display: block;
        line-height: 40px;
        width: 110px;
        text-align: center;
        color: #70a1e2;
      }
    }
  }
}
.logo_confirm {
  text-align: center;
  margin-top: 50px;
}
.content_right {
  text-align: center;
  background-color: #1f2731;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .default-img {
    // width: 419px;
    // height: 700px;
    img {
      width: 100%;
      height: 100%;
    }
    .zipTxt {
      color: #ffffff;
      margin: 0;
      font-size: 18px;
      font-weight: 600;
    }
  }
}
.closeBtn {
  position: absolute;
  top: 10px;
  right: 20px;
}
.uplogoRule {
  cursor: pointer;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>

<style scoped>
/deep/ .el-progress__text {
  color: #fff;
}
/deep/ .el-button.is-round {
  border-radius: 4px;
}
</style>
